<template>
  <section
    id="layout"
    class="layout"
  >
    <app-header v-if="!$route.meta.hideHeader" />
    <section
      :class="[
        'container',
        'maia-container__safe-area',
        $route.meta.hideHeader && $route.meta.hideFooter ? 'hider-header-and-footer' : '',
        $route.meta.hideHeader ? 'hider-header' : '',
        $route.meta.hideFooter ? 'hider-footer' : '',
      ]"
    >
      <section class="router-view-container">
        <router-view
          v-slot="{ Component }"
          :key="routerKey"
        >
          <keep-alive :include="includes">
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </section>
    </section>
    <app-footer v-if="!$route.meta.hideFooter" />
  </section>
</template>

<script lang="ts" setup name="layout">
import { computed, watch } from 'vue';

import { useRoute } from 'vue-router';

import { useAppStore } from '@/store/app';
import { useKeepAliveStore } from '@/store/keep-alive';

const route = useRoute();

const appStore = useAppStore();
const keepAliveStore = useKeepAliveStore();
const includes = computed(() => keepAliveStore.cachedViews);
const routerKey = computed(() => appStore.currentDate);

watch(
  () => route,
  (newRoute) => {
    if (newRoute.name && newRoute.meta && newRoute.meta.keepAlive) {
      keepAliveStore.addCacheOnly(newRoute);
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>

<style lang="scss" scoped>
  .container {
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    overflow: hidden;

    .router-view-container {
      height: 100%;
      overflow-y: auto;
    }
  }
</style>
